<template>
  <div class="staffHours">
    <div class="title">
      <span>人员工时</span>
      <div class="switch-year">
        <el-date-picker
          v-model="time"
          type="month"
          @change="switch_year_fn"
          placeholder="选择时间" :clearable="false" :editable="false">
        </el-date-picker>
      </div>
    </div>
    <ul class="taskNum-tips">
      <li><i></i>任务为0</li>
      <li><i></i>任务为1</li>
      <li><i></i>任务为2</li>
      <li><i></i>任务为3</li>
    </ul>
    <div class="content" v-if="usersTaskNum.length>0">
      <div class="top">
        <div class="left">1</div>
        <div class="right">
          <ul>
            <li v-for="item in 31">{{item}}</li>
          </ul>
        </div>
      </div>
      <div class="scroll">
        <vuescroll :ops="ops">
        <div class="user-list" v-for="(item,index) in usersTaskNum" :key="index">
          <div class="left">{{item.userName}}</div>
          <div class="right">
            <ul>
              <li v-for="(d,i) in item.taskNums" :key="i"
                  :class="d==0?'':(d==1?'task_1':(d==2?'task_2':(d==3?'task_3':'')))"></li>
            </ul>
          </div>
        </div>
        </vuescroll>
      </div>

    </div>
    <div class="defaultPage-smart" v-if="usersTaskNum.length==0">
      <div class="box">
        <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
        <p>暂无数据</p>
      </div>
    </div>
    <loading v-if="is_show_loading"></loading>
  </div>
</template>

<script>
  import loading from '@/components/loading'
  import vuescroll from 'vuescroll'
  export default {
    name: "",
    data() {
      return {
        is_show_loading:true,
        month: '',
        usersTaskNum: [],//人员工时
        time: '',
        year: '',
        last_month: '',
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '120px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
      }
    },
    components: {
      vuescroll,loading
    },
    created() {
      this.time=new Date();
      this.year = new Date().Format('yyyy');
      this.last_month = new Date().Format('MM');
      this.getUsersTaskNum();
    },
    methods: {
      switch_year_fn() {
        this.year = this.time.Format('yyyy');
        this.last_month = this.time.Format('MM');
        this.getUsersTaskNum();
      },
      //获取人员工时
      getUsersTaskNum() {
        this.$http.get('/task/task/count/getUsersTaskNum', {
          params: {
            companyId: this.$store.state.userInfo.companyId,
            month: this.last_month,
            year: this.year,
          }
        }).then(res => {
          if (res.statusCode == 200) {
            this.usersTaskNum = res.data.list;
            setTimeout(() => {
              this.is_show_loading=false;
            },1000)
          } else {
            this.$message.error(res.statusMsg);
          }
        })
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .staffHours {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 32px;

    .title {
      color: #454A55;
      font-size: 18px;
      font-weight: Bold;
      position: relative;
      height: 36px;

      > span {

      }

      .switch-year {
        position: absolute;
        top: 0;
        right: 0;
      }
    }

    .taskNum-tips {
      padding: 40px 40px 20px 40px;
      display: flex;

      li {
        width: 104px;
        position: relative;
        text-indent: 40px;

        i {
          left: 0;
          top: 0;
          position: absolute;
          width: 20px;
          height: 12px;
          background-color: #BBD9F1;
        }
      }

      li:nth-child(1) {
      }

      li:nth-child(2) {
        i {
          background-color: #0A52E4;
        }

      }

      li:nth-child(3) {
        i {
          background-color: #FF8F2B;
        }

      }

      li:nth-child(4) {
        i {
          background-color: #FC5A44;
        }

      }
    }

    .content {
      height: calc(100% - 110px);

      .top {
        display: flex;

        .left {
          width: 121px;
          visibility: hidden;
        }

        .right {
          padding: 30px 0;
          width: calc(100% - 121px);
          border-bottom: 1px solid #EEEEEE;

          > ul {
            display: flex;

            > li {
              flex: 1;
              font-size: 14px;
              color: #96A2AA;
              text-align: center;
            }
          }
        }
      }

      > .scroll {
        height: calc(100% - 80px);

        .user-list {
          display: flex;
          margin-top: 44px;

          .left {
            width: 121px;
            color: #96A2AA;
            font-size: 16px;
          }

          .right {
            width: calc(100% - 121px);

            > ul {
              display: flex;

              > li {
                flex: 1;
                height: 12px;
                background-color: #BBD9F1;
              }

              > .task_1 {
                background-color: #0A52E4;
              }

              > .task_2 {
                background-color: #FF8F2B;
              }

              > .task_3 {
                background-color: #FC5A44;
              }
            }
          }
        }
      }


    }
  }
</style>
<style type="text/scss" lang="scss">
  .staffHours {
    .switch-year {
      .el-date-editor.el-input {
        width: 114px;
      }

      .el-input__inner {
        width: 114px;
        height: 36px;
        line-height: 36px;
        padding-right: 0;
        padding-left: 30px;
        background-color: #F2F6F9;
        border-radius: 6px;
        border-color: #F2F6F9;
        cursor: pointer;
      }

      .el-input__icon {
        line-height: 36px;
      }
    }
  }
</style>
